<!-- home -->
<template>
  <div class="about-container">
    <div class="warpper">
      <div class="ownInfo">
        <div>
          <img v-if="userInfo.avatar" :src="userInfo.avatar" class="ownPhoto" />
          <!-- <img v-else src="@/assets/images/avatar.png" class="ownPhoto" /> -->
          <div v-else class="ownPhoto">{{ userInfo.name ? userInfo.name.slice(-1) : '我' }}</div>
        </div>
        <div class="userWork">
          <div class="username">{{ userInfo.name }}</div>
          <div class="userInfo">{{ userInfo.department }}</div>
        </div>
      </div>
      <div class="tabs">
        <van-tabs v-model="tabIndex" @click="onClick">
          <van-tab title="追踪">
            <div class="tabsBox_content" v-if="tabIndex === 0">
              <no-data :desc="'暂无数据'" v-if="!trackList.length"></no-data>
              <van-list
                v-else
                :immediate-check="false"
                v-model="trackListLoading"
                :finished="finishedTrackList"
                :finished-text="!trackList.length ? '' : ''"
                @load="queryTrackList"
              >
                <div v-for="(e, n) in trackList" :key="n" class="tab_container">
                  <div class="tab_indexTitle">
                    <span class="textname">
                      <span
                        >{{ e.indexName }}-{{ targetTypeJson[e.targetType] }} {{ unitFormat(e.newValue, e.dataType) }}
                      </span>
                      <span>{{ e.dimName }}</span>
                    </span>
                    <span class="statu">追踪中</span>
                  </div>
                  <div class="indexParameters">
                    <div class="indexParame_Number">
                      <p class="num-val">{{ Number(e.oldValue) | dataFormatWidthUnitLevel(e.dataType, e.unitLevel) }}</p>
                      <p class="num-time">历史 {{ e.oldFeedTime.split(' ')[0] }}</p>
                    </div>
                    <div class="indexParame_Time">
                      <p class="num-val">{{ Number(e.newValue) | dataFormatWidthUnitLevel(e.dataType, e.unitLevel) }}</p>
                      <p class="num-time">现状 {{ e.newFeedTime.split(' ')[0] }}</p>
                    </div>
                  </div>
                  <div class="avotars">
                    <div class="imglist">
                      <template v-for="(i, num) in e.traceRecord.slice(0, 3)">
                        <img
                          v-if="i.avatorUrl"
                          :style="{ marginLeft: num === 0 ? 0 : '-12px', zIndex: 3 - num }"
                          :key="i.avatorUrl"
                          :src="i.avatorUrl"
                          alt=""
                          class="new-avatar"
                        />
                        <p
                          :style="{
                            marginLeft: num === 0 ? 0 : '-12px',
                            zIndex: 3 - num,
                            background: i.color //colorList[num % 3]
                          }"
                          :key="num"
                          v-else
                          class="avatar-text"
                        >
                          <span>{{ i.userName ? i.userName.slice(-1) : '' }}</span>
                        </p>
                      </template>
                    </div>
                    <div class="right-middle">
                      <p v-if="e.hasNewStatus" class="new-sta">
                        <span>新</span>
                      </p>
                      <p class="new-msg" v-if="!e.traceRecord[0].eventContent || e.traceRecord[0].eventType !== '3'">
                        <span>{{
                          e.traceRecord[0].creatorId === userInfo.userid ? '我' : e.traceRecord[0].creatorName
                        }}</span>
                        <span>{{ e.traceRecord[0].eventTypeValue }}</span>
                      <span
                            v-if="e.traceRecord[0].eventType === '3'"
                          >给 {{ traceRecordFn(e.traceRecord, e.traceRecord[0].eventId) }}</span
                        >
                      </p>
                      <p class="new-msg-text" v-else>
                      <span>{{
                          e.traceRecord[0].creatorId === userInfo.userid ? '我' : e.traceRecord[0].creatorName
                        }}</span>@{{ traceRecordFn(e.traceRecord, e.traceRecord[0].eventId) }}:{{e.traceRecord[0].eventContent}}
                      </p>
                    </div>
                  </div>
                  <div class="tab_footerButtons">
                    <div @click.stop="closeFeed(e, n, 'trackList')" class="end_track">结束追踪</div>
                    <div class="remind_who" @click.stop="testddapi(e, 'trackList')">@谁</div>
                    <div @click.stop="lookDetails(e, n, 'trackList')" class="lookdetail">
                      <span class="test">
                        <span>查看详情</span>
                        <span v-if="e.hasNewStatus" class="red">•</span>
                      </span>
                    </div>
                  </div>
                </div>
              </van-list>
            </div>
          </van-tab>
          <van-tab title="@我">
            <div class="tabsBox_content" v-if="tabIndex === 1">
              <no-data :desc="'暂无数据'" v-if="!forwardList.length"></no-data>
              <van-list
                v-else
                :immediate-check="false"
                v-model="forwardListLoading"
                :finished="finishedForwardList"
                :finished-text="!forwardList.length ? '' : ''"
                @load="abountMe"
              >
                <div v-for="(e, n) in forwardList" :key="n" class="tab_container">
                  <div class="tab_indexTitle">
                    <span class="textname">
                      <span
                        >{{ e.indexName }}-{{ targetTypeJson[e.targetType] }} {{ unitFormat(e.newValue, e.dataType) }}
                      </span>
                      <span>{{ e.dimName }}</span>
                      <!-- <span :key="v" v-for="v in e.dimensionInfoList">-{{ v.name }}</span> -->
                    </span>
                    <span class="statu">追踪中</span>
                  </div>
                  <div class="indexParameters">
                    <div class="indexParame_Number">
                      <p class="num-val">{{ e.oldValue | dataFormatWidthUnitLevel(e.dataType, e.unitLevel) }}</p>
                      <p class="num-time">历史 {{ e.oldFeedTime.split(' ')[0] }}</p>
                    </div>
                    <div class="indexParame_Time">
                      <!-- {{ unitFormat(e.newValue, 'number') }} -->
                      <p class="num-val">{{ e.newValue | dataFormatWidthUnitLevel(e.dataType, e.unitLevel) }}</p>
                      <p class="num-time">现状 {{ e.newFeedTime.split(' ')[0] }}</p>
                    </div>
                  </div>
                  <div class="avotars">
                    <div class="imglist">
                      <template v-for="(i, num) in e.traceRecord.slice(0, 3)">
                        <img
                          v-if="i.avatorUrl"
                          :style="{ marginLeft: num === 0 ? 0 : '-12px', zIndex: 3 - num }"
                          :key="i.avatorUrl"
                          :src="i.avatorUrl"
                          alt=""
                          class="new-avatar"
                        />
                        <p
                          :style="{
                            marginLeft: num === 0 ? 0 : '-12px',
                            zIndex: 3 - num,
                            background: i.color //colorList[num % 3]
                          }"
                          :key="num"
                          v-else
                          class="avatar-text"
                        >
                          <span>{{ i.userName ? i.userName.slice(-1) : '' }}</span>
                        </p>
                      </template>
                    </div>
                    <div class="right-middle">
                      <p v-if="e.hasNewStatus" class="new-sta">
                        <span>新</span>
                      </p>
                      <p class="new-msg" v-if="!e.traceRecord[0].eventContent || e.traceRecord[0].eventType !== '3'">
                        <span>{{
                          e.traceRecord[0].creatorId === userInfo.userid ? '我' : e.traceRecord[0].creatorName
                        }}</span>
                        <span>{{ e.traceRecord[0].eventTypeValue }}</span>

                        <span
                            v-if="e.traceRecord[0].eventType === '3'"
                          >给 {{ traceRecordFn(e.traceRecord, e.traceRecord[0].eventId) }}</span
                        >
                      </p>
                    <p class="new-msg-text" v-else>
                      <span>{{
                          e.traceRecord[0].creatorId === userInfo.userid ? '我' : e.traceRecord[0].creatorName
                        }}</span>@{{ traceRecordFn(e.traceRecord, e.traceRecord[0].eventId) }}:{{e.traceRecord[0].eventContent}}
                      </p>
                    </div>
                  </div>
                  <div class="tab_footerButtons">
                    <div @click.stop="closeFeed(e, n, 'forwardList')" class="end_track">结束追踪</div>
                    <div class="remind_who" @click.stop="testddapi(e, 'forwardList')">@谁</div>
                    <div @click.stop="lookDetails(e, n, 'forwardList')" class="lookdetail">
                      <span class="test">
                        <span>查看详情</span>
                        <span v-if="e.hasNewStatus" class="red">•</span>
                      </span>
                    </div>
                  </div>
                </div>
              </van-list>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <AddActionSheet ref="$addPop"  :users='users' :query="query" :listName='listName'/>
  </div>
</template>

<script>
// eslint-disable-next-line
import { debounce,isEmpty,concat } from 'lodash'
import NoData from '@/components/NoData'
import { mapGetters } from 'vuex'
import { DDParams, DDChooseParams } from '@/utils/common.js'
import { unitFormat, getUnitLv } from '@/filters/filter'
import { getUserInfo, pushFeeds, queryTrackList, abountMe, closeFeed } from '@/api/home'
import AddActionSheet from '../../components/add-actionSheet.vue'
import sensormixin from '@/mixins'
const TRACE_STORAGE_NAME = 'TRACE_STORAGE_NAME'
const ABOUT_ME_TRACE_STORAGE_NAME = 'ABOUT_ME_TRACE_STORAGE_NAME'
// const USER_HAS_LOOK = 'user_has_look'
export default {
  mixins: [sensormixin],
  data() {
    return {
      trackListNum: 1,
      abountMeNum: 1,
      tabIndex: 0,
      targetTypeJson: {
        year: '年',
        month: '月',
        day: '日'
      },
      trackListLoading: false,
      finishedTrackList: true,
      finishedForwardList: true,
      forwardListLoading: false,
      colorList: ['#EE9F10', '#12BB63', '#0A82FA'],
      closeFeedFlag: false,
      // userInfo: {},
      trackList: [],
      forwardList: [],
      transitForwardList: [],
      query: {},
      listName: '',
      maxUsers: 5,
      users: [],
      isClick: false
    }
  },
  computed: {
    ...mapGetters(['corpId', 'agentId'])
  },
  watch: {
    users(newVal, oldVal) {
      this.users = newVal
    }
  },
  created() {
    const { tabIndex } = this.$route.query // || 0
    this.tabIndex = Number(tabIndex) || 0
    if (this.tabIndex) {
      this.abountMeNum = 1
      this.forwardList = []
      this.finishedForwardList = false
      this.abountMe()
    } else {
      this.trackList = []
      this.trackListNum = 1
      this.finishedTrackList = false
      this.queryTrackList()
    }
  },
  components: { NoData, AddActionSheet }, // dataType   number,percent,pt,person,
  mounted() {
    // if (this.$store.getters.userInfo) {
    //   this.userInfo = this.$store.getters.userInfo
    // }
    this.getUserInfo()
  },
  methods: {
    traceRecordFn(arr, id) {
      const list = []
      arr.some(v => {
        if (v.eventId === id) {
          list.push(v.userName)
        }
      })
      if (list.length > 1) return list.join(', ')
      return list.join('')
    },
    unitFormat(data, type) {
      return unitFormat(data, type)
    },
    onClick(e) {
      if (e) {
        this.abountMeNum = 1
        this.forwardList = []
        this.finishedForwardList = false
        this.abountMe()
      } else {
        this.trackList = []
        this.trackListNum = 1
        this.finishedTrackList = false
        this.queryTrackList()
      }
    },
    async closeFeed(e, n, name) {
      if (this.closeFeedFlag) return
      this.closeFeedFlag = true
      const data = await closeFeed({ traceId: e.traceId, snapshotValue: e.newValue })
      if (data.success) {
        this[name].splice(n, 1)
        localStorage.setItem(name, JSON.stringify(this[name]))
        this.$toast('结束追踪成功')
      }
      this.closeFeedFlag = false
      try {
        this.endTraceForSensor('关于我')
      } catch (err) {
        console.log('结束追踪埋点报错：', err)
      }
    },
    lookDetails(e, n, name) {
      let storageName = TRACE_STORAGE_NAME
      if (name === 'forwardList') storageName = ABOUT_ME_TRACE_STORAGE_NAME
      const trackObjInStorage = this.getTrackListInStorage(storageName)
      if (trackObjInStorage[e.traceId]) {
        trackObjInStorage[e.traceId].hasView = 'true'
      }
      this.saveTrackListObj(storageName, trackObjInStorage)
      // 查看以后，修改前端存储记录的eventId
      this[name][n].hasNewStatus = false
      this.$router.push({
        path: '/traceDetail',
        query: {
          traceId: e.traceId,
          itemIndex: n,
          name,
          insideIn: true,
          tabIndex: this.tabIndex
        }
      })
    },
    cleareTrackList(name) {
      if (name === 'forwardList') {
        this.forwardList = []
        this.forwardListLoading = false
        this.finishedForwardList = true
        this.abountMeNum = 1
      }
      if (name === 'trackList') {
        this.trackList = []
        this.trackListLoading = false
        this.finishedTrackList = true
        this.trackListNum = 1
      }
    },
    // 直接存储修改后的记录
    saveTrackListObj(storageName, value) {
      window.localStorage.setItem(storageName, JSON.stringify(value))
    },
    getTrackListInStorage(storageName) {
      const trackListStr = window.localStorage.getItem(storageName)
      let trackObj = {}
      if (trackListStr) {
        trackObj = JSON.parse(trackListStr)
      }
      return trackObj
    },
    saveTrackList(storageName, list = []) {
      const trackObj = this.getTrackListInStorage(storageName)
      list.forEach(item => {
        if (trackObj[item.traceId] && trackObj[item.traceId].hasView === 'true') {
          if (trackObj[item.traceId].eventId !== item.traceRecord[0].eventId) {
            // 取记录最后一条
            trackObj[item.traceId] = {
              eventId: item.traceRecord[0].eventId,
              hasView: 'false'
            }
          }
        } else {
          // 取记录最后一条
          trackObj[item.traceId] = {
            eventId: item.traceRecord[0].eventId,
            hasView: 'false'
          }
        }
      })
      window.localStorage.setItem(storageName, JSON.stringify(trackObj))
    },
    // 计算每一条追踪记录的状态
    caclTraceStatus(storageName, records = []) {
      // 获取记录存储状态
      const trackStatus = this.getTrackListInStorage(storageName)
      records.forEach(record => {
        const eventId = record.traceRecord[0].eventId
        if (trackStatus[record.traceId] && trackStatus[record.traceId].eventId) {
          if (trackStatus[record.traceId].eventId === eventId) {
            if (trackStatus[record.traceId].hasView === 'true') {
              record.hasNewStatus = false
            } else {
              record.hasNewStatus = true
            }
          } else {
            record.hasNewStatus = true
          }
        } else {
          record.hasNewStatus = true
        }
      })
    },
    async queryTrackList() {
      if (this.finishedTrackList) return
      const obj = {
        pageSize: 10,
        pageNum: this.trackListNum
      }
      const result = await queryTrackList(obj)
      this.trackListLoading = false
      if (!result.success) return
      if (result.value.pages === 0) {
        this.cleareTrackList('trackList')
      } else {
        const records = result.value.records
        if (Array.isArray(records) && records.length > 0) {
          ++this.trackListNum
          this.caclTraceStatus(TRACE_STORAGE_NAME, records)
          this.saveTrackList(TRACE_STORAGE_NAME, records)
          if (result.value.pages === 1) {
            this.trackList = result.value.records
          } else {
            this.trackList = this.trackList.concat(result.value.records)
          }
          this.trackList.forEach(e => {
            const names = []
            const items = []
            e.traceRecord.forEach(v => {
              if (!names.includes(v.userName)) names.push(v.userName)
            })
            names.forEach((v, i) => {
              items.push(
                e.traceRecord.find(e => {
                  if (e.userName === v) {
                    if (!e.avatorUrl) e.color = this.colorList[i % 3]
                    return e
                  }
                })
              )
            })
            e.traceRecord = items
            e.unitLevel = getUnitLv(Number(e.newValue), e.dataType)
          })
          // 最后一页
          if (result.value.current >= result.value.pages) {
            this.finishedTrackList = true
          }
        } else {
          this.finishedTrackList = true
        }
      }
      try {
        this.traceListForSensor()
      } catch (err) {
        console.log('查询追踪列表埋点报错：', err)
      }
    },
    async abountMe() {
      if (this.finishedForwardList) return
      const obj = {
        pageSize: 10,
        pageNum: this.abountMeNum
      }
      const res = await abountMe(obj)
      this.forwardListLoading = false
      if (!res.success) return
      if (res.value.pages === 0) {
        this.cleareTrackList('forwardList')
      } else {
        const records = res.value.records
        if (Array.isArray(records) && records.length > 0) {
          ++this.abountMeNum
          this.caclTraceStatus(ABOUT_ME_TRACE_STORAGE_NAME, records)
          this.saveTrackList(ABOUT_ME_TRACE_STORAGE_NAME, records)
          if (res.value.pages === 1) {
            this.forwardList = res.value.records
          } else {
            this.forwardList = this.forwardList.concat(res.value.records)
          }
          this.forwardList.forEach(e => {
            const names = []
            const items = []
            e.traceRecord.forEach(v => {
              if (!names.includes(v.userName)) names.push(v.userName)
            })
            names.forEach((v, i) => {
              items.push(
                e.traceRecord.find(e => {
                  if (e.userName === v) {
                    if (!e.avatorUrl) e.color = this.colorList[i % 3]
                    return e
                  }
                })
              )
            })
            e.traceRecord = items
            e.unitLevel = getUnitLv(Number(e.newValue), e.dataType)
          })

          // 最后一页
          if (res.value.current >= res.value.pages) {
            this.finishedForwardList = true
          }
        } else {
          this.finishedForwardList = true
        }
      }
      try {
        this.aboutMeTraceListForSensor()
      } catch (err) {
        console.log('查询追踪列表埋点报错：', err)
      }
    },
    async handleTrackButton(eventContent) {
      if (!this.users.length) return
      const params = {
        name: this.userInfo.name,
        indexName: this.query.indexName,
        emplIds: this.users,
        traceId: this.query.traceId,
        indexValue: this.query.newValue
      }
      const test = DDParams(params)
      test.eventContent = eventContent
      if (isEmpty(test.eventContent)) {
        test.msgVO.markdown = `**${params.name}发了一条数据追踪**  \n   我正在关注${params.indexName}数据`
      } else {
        test.msgVO.markdown = `**${params.name}发了一条数据追踪**  \n   ${test.eventContent}`
      }
      const data = await pushFeeds(test)
      if (data.success) {
        this.$toast('转发追踪成功')
        if (this.listName === 'trackList') {
          this.trackList = []
          this.trackListNum = 1
          this.finishedTrackList = false
          this.queryTrackList()
        } else {
          this.abountMeNum = 1
          this.forwardList = []
          this.finishedForwardList = false
          this.abountMe()
        }
        this.users = []
        this.$refs.$addPop.close()
      }
      try {
        this.transmitTraceForSensor('关于我')
      } catch (err) {
        console.log('@我埋点报错：', err)
      }
    },
    testddAdd: debounce(function() {
      const emplIds = this.users.map(item => item.emplId)
      const _this = this
      this.$dd.biz.contact.complexPicker({
        // 成功时候进入的函数
        onSuccess: function({ users, departments }) {
          if (departments.length) {
            _this.$toast('暂不支持选择整个部门')
          } else {
            // const selectedEmplIds = _this.users.map(user => user.emplId)
            // const addUsers = users.filter(user => {
            //   return !selectedEmplIds.find(id => user.emplId === id)
            // })
            // _this.maxUsers = 5 - _this.users.length
            _this.users = concat([], users)
          }
        },
        // 失败函数
        onFail: function(err) {
          console.log(err, 'err>>>>')
        },
        // 公共的方法
        // eslint-disable-next-line no-undef
        ...DDChooseParams(this.corpId, this.agentId, this.userInfo.userid, this.maxUsers, emplIds)
      })
    }, 300),
    testddapi(query, listName) {
      this.users = []
      this.$refs.$addPop.open()
      this.query = query
      this.listName = listName
    },
    async getUserInfo() {
      const res = await getUserInfo()
      if (res.value) {
        const { department } = res.value
        // this.userInfo = { ...this.userInfo, department }
        this.$store.commit('SET_USERINFO', { ...this.userInfo, department })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.about-container {
  padding: 20px 20px 0;
  height: 100%;
  overflow: hidden;
  .warpper {
    height: 100%;
    .ownInfo {
      width: 339px;
      height: 80px;
      display: flex;
      border-radius: 6px;
      padding: 0 19px;
      background: $light-bc;
      align-items: center;
      .ownPhoto {
        display: inline-block;
        width: 50px;
        height: 50px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        line-height: 50px;
        border-radius: 50%;
        background: #0a82fa;
        box-shadow: 0px 4px 10px 0px rgba(232, 232, 232, 0);
        // border: 2px solid #e9e9ed;
      }
      .userWork {
        margin-top: 2px;
        margin-left: 12px;
        .username {
          font-size: 18px;
          line-height: 25px;
          font-weight: 500;
        }
        .userInfo {
          font-size: 14px;
          color: #fff;
          line-height: 20px;
          font-weight: 400;
        }
      }
    }
    /deep/.tabs {
      .van-tabs__wrap {
        border-bottom: 1px solid rgba(244, 244, 244, 0.1);
        margin-bottom: 12px;
      }
      .van-tab {
        background-color: $main-bc;
      }
      .van-tab__text--ellipsis {
        color: #bec1cf;
        font-weight: 400;
      }
      .van-tab--active {
        .van-tab__text--ellipsis {
          color: #e9e9ed; // #bec1cf;
          font-weight: 600;
        }
      }
      .van-tabs__nav {
        background-color: $main-bc;
        width: 180px;
      }
      .van-tabs__line {
        background-color: $main-blue;
        height: 2px;
      }
      .van-info {
        right: -10px;
      }
    }
    /deep/.van-tabs {
      height: 100%;
    }
    /deep/.van-tabs__content {
      height: calc(100% - 49px);
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .tabs {
      height: calc(100% - 80px);
      overflow: hidden;
    }
    .tabsBox_content {
      height: 100%;
      .tab_container {
        width: 339px;
        margin: 0px auto 16px;
        background: $light-bc;
        box-shadow: 0px 8px 40px -32px rgba(9, 15, 23, 0.04);
        border-radius: 6px;
        .tab_indexTitle {
          padding: 12px 20px 0px 20px;
          display: flex;
          align-items: center;
          align-items: flex-start;
          .textname {
            font-size: 14px;
            font-weight: 400;
            flex: 1;
            display: inline-block;
            vertical-align: middle;
          }
          .statu {
            margin-left: 10px;
            padding: 0 2px;
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            display: inline-block;
            vertical-align: middle;
            height: 15px;
            line-height: 17px;
            background: #0a82fa;
            border-radius: 2px;
          }
        }
        .avotars {
          box-sizing: border-box;
          min-height: 48px;
          padding: 12px 20px;
          display: flex;
          position: relative;
          // align-items: center;
          .imglist {
            // display: inline-block;
            display: flex;
            width: fit-content;
            justify-content: center; /* 水平居中 */
            // align-items: center; /* 垂直居中 */
            align-items: flex-start;
            padding-right: 12px;
            // vertical-align: middle;
            // white-space: nowrap;
          }
          .new-avatar {
            position: relative;
            overflow: hidden;
            width: 24px;
            height: 24px;
            border: 2px solid $light-bc;
            vertical-align: middle;
            border-radius: 50%;
          }
          .right-middle {
            flex: 1;
            padding-top: 6px;
            display: flex;
            // white-space: nowrap;
            // display: inline-block;
            // vertical-align: middle;
            // white-space: nowrap;
            // display: flex;
            // width: fit-content;
            // justify-content: center; /* 水平居中 */
            // align-items: center; /* 垂直居中 */
            // margin-top: 10px;
          }
          .avatar-text {
            // position: relative;
            // flex: 1;
            width: 24px;
            height: 24px;
            border: 2px solid $light-bc;
            border-radius: 50%;
            display: inline-block;
            // display: inline-flex;
            // align-items: center;
            // justify-content: center;
            text-align: center;
            vertical-align: middle;
            line-height: 21px;
          }
          .new-sta {
            display: inline-block;
            // width: 16px;
            padding: 0 2px;
            height: 14px;
            background: linear-gradient(135deg, #ff9935 0%, #db6b2f 100%);
            border-radius: 3px;
            text-align: center;
            line-height: 14px;
            color: #fff;
            font-size: 10px;
            margin-right: 4px;
            vertical-align: top;
          }
          .new-msg {
            display: inline-block;
            font-size: 12px;
            font-weight: 400;
            color: #ffffff;
            line-height: 17px;
          }
          .new-msg-text{
            display: inline-block;
             font-size: 12px;
              font-weight: 400;
              color: #ffffff;
              line-height: 17px;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              white-space:pre-line;
              word-break: break-all
          }
        }
        .indexParameters {
          display: flex;
          padding: 12px 20px 0px 20px;
          .indexParame_Number {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .num-val {
              font-size: 24px;
              color: #fff;
              font-weight: bold;
              line-height: 28px;
            }
            .num-time {
              color: #a1a3ad;
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
            }
          }
          .indexParame_Time {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .num-val {
              font-size: 24px;
              color: #ffa925;
              font-weight: bold;
              line-height: 28px;
            }
            .num-time {
              color: #a1a3ad;
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
            }
          }
        }

        .tab_footerButtons {
          display: flex;
          justify-content: space-between;
          padding-top: 10px;
          padding-bottom: 10px;
          border-top: 1px solid $light-grey;
          .end_track {
            flex: 1;
            border-right: 1px solid $light-grey;
            text-align: center;
            font-size: 14px;
          }
          .remind_who {
            border-right: 1px solid $light-grey;
            flex: 1;
            text-align: center;
            font-size: 14px;
          }
          .lookdetail {
            flex: 1;
            text-align: center;
            font-size: 14px;
            .test {
              position: relative;
              .red {
                position: absolute;
                color: red;
                top: -10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
